<template>
  <vab-card class="branch" shadow="hover" skeleton>
    <template #header>
      <span>
        <vab-icon icon="donut-chart-fill" />
        额度分布
      </span>
    </template>
    <vab-chart
      class="branch-echart"
      :init-options="initOptions"
      :option="option"
      theme="vab-echarts-theme"
    />
  </vab-card>
</template>

<script>
  import VabChart from '@/plugins/VabChart'
  export default defineComponent({
    name: 'Branch',
    components: {
      VabChart,
    },
    props: {
      list: {
        type: Array,
        default: null,
      },
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const state = reactive({
        initOptions: {
          renderer: 'svg',
        },
        option: {
          tooltip: {
            trigger: 'item',
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              minAngle: 10,
              radius: ['50%', '70%'],
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
              data: [
                {
                  value: props.list.total,
                  name: `累计使用量`,
                },
                {
                  value: props.list.balance,
                  name: `剩余额度`,
                },
              ],
              label: {
                show: true,
                formatter: function (params) {
                  return `${params.name}: ￥${params.value}`
                },
              },
            },
          ],
        },
      })
      onBeforeUpdate(() => {
        console.log(props.list)
        state.option.series[0].data[0].value = props.list.total
        state.option.series[0].data[0].name = `累计使用量`
        state.option.series[0].data[1].value = props.list.balance
        state.option.series[0].data[1].name = `剩余额度`
      })
      return {
        ...toRefs(state),
      }
    },
  })
</script>
